<template>
	<div class="basic_wrap">
    <div class="newTitle">
      <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
      <div class="title">{{item.title}}</div>
    </div>
    <div class="emp" style="height: 50px"></div>
    <div class="cover">
      <img :src="item.img" class="coverImg">
    </div>
    <div class="detailFoalt">
      <div class="detailWrap">
        <div class="detailTitle">
          {{item.title}}
        </div>
        <div class="detailBot">
          <div class="detailContent">
            <div class="contentItem">
              <div class="conTop">利率:</div>
              <div class="conBot" style="color: #1DB336">{{item.rate+'%'}}</div>
            </div>
            <div class="contentItem">
              <div class="conTop">投资周期</div>
              <div class="conBot">{{item.day+(item.type==3?$t('index.hour'):$t('index.day'))}}</div>
            </div>
            <div class="contentItem">
              <div class="conTop">投资金额</div>
              <div class="conBot">{{common.precision_basic(item.min)}}U</div>
            </div>
            <div class="contentItem">
              <div class="conTop">投资类型</div>
              <div class="conBot">{{$t('index.method'+item.type)}}</div>
            </div>
          </div>
          <div class="block_div proCharts" ref='charts'></div>
<!--          <div class="block_div item_detail">-->
<!--            <div class="title">-->
<!--              {{$t('invest.detail')}}-->
<!--            </div>-->
<!--            <div class="content" v-html="item.content"></div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
		<div class="btnWrap" @click="showPopup=true">
      <div class="btn">
        {{$t('invest.investNow')}}
      </div>
		</div>
		<van-popup v-model:show="showPopup" position="bottom" closeable close-icon-position="top-left" :round="true">
			<div class="item_info popup_info">
				<div class="title">
					{{$t('invest.orderInfo')}}
				</div>
				<div class="detail">
					<van-cell-group :border="false">
						<van-cell :title="item.type==1?$t('index.dailyRate'):$t('index.rate')" value-class="value_class"
							:border="false" :value="item.rate+'%'" />
						<van-cell :title="$t('invest.cycle')" value-class="value_class" :border="false"
							:value="item.day+(item.type==3?$t('index.hour'):$t('index.day'))" />
						<van-cell :title="$t('invest.amount')" value-class="value_class" :border="false"
							:value="common.currency_symbol_basic()+common.precision_basic(item.min)+ 'U'" />
						<van-cell :title="$t('invest.type')" value-class="value_class" :border="false"
							:value="$t('index.method'+item.type)" />
						<van-cell v-show="user.login" :title="$t('invest.paymentType')" value-class="value_class"
							:border="false"
							:value="$t('user.fundingAccount')+' ('+common.precision_basic(user.balance)+'U)'" />
            <van-cell title="投资数量" value-class="value_class"
                      :border="false" :use-label-slot="true">
              <van-stepper v-model="number" integer  :min="1" :max="20" />
            </van-cell>
					</van-cell-group>
				</div>
<!--				<div class=" flex_center invest_detail_wrap">-->
<!--					<div>-->
<!--						{{$t('invest.income')}} <span class="detail_money">{{common.currency_symbol_basic()}}{{income}}</span>-->
<!--					</div>-->
<!--					<div class="basic_btn sbtn" @click="submit">-->
<!--						{{$t('invest.submit')}}-->
<!--					</div>-->
<!--				</div>-->
        <div class="sendBtn">
          <div class="btn">
            <div class="btnLeft">
              {{$t('invest.income')}}
              <span style="color: red;font-weight: bold;font-size: 16px">{{income}}U</span>
            </div>
            <div class="btnRight" @click="showPassword = true">提交</div>
          </div>
        </div>
			</div>
		</van-popup>
    <van-dialog v-model="showPassword" :showCancelButton="false" :showConfirmButton="false" :closeOnClickOverlay="true">
      <div class="diologWrap">
        <div class="dioTilte">支付密码</div>
        <input type="password" placeholder="请输入密码" v-model="passwordPay">
        <div class="dioBtnWrap">
          <div class="dioBtn leftBtn" @click="showPassword = false">取消</div>
          <div class="dioBtn rightBtn" @click="submit">确定</div>
        </div>
      </div>
    </van-dialog>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
	import * as echarts from 'echarts';
	import {
		Icon,
		Popup,
		Field,
		Cell,
		CellGroup,
    Stepper
	} from 'vant';
	Vue.use(Icon).use(Popup).use(Field).use(Cell).use(CellGroup).use(Stepper);
	export default {
		name: "",
		components: {
			bsHeader
		},
		data() {
			return {
        showPassword:false,
        passwordPay:'',
				data: [],
				item: {
					min: 0,
					type: 1,
					rate: 0,
					day: 0
				},
				user: [],
				money: "",
				income: 0,
				showPopup: false,
				loading: false,
        number:1
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#0F6EFF');
				plus.navigator.setStatusBarStyle('light');
			}
			this.$parent.footer('user', false);
		},
		mounted() {
			this.start();
		},
		methods: {
			start() {
				Fetch('/index/item_detail', {
					id: this.$router.history.current.params.code
				}).then(r => {
					this.item = r.data.item;
					this.user = r.data.user;
					this.change();
					this.mycharts(this.item.k_x,this.item.k_y_12m);
				})
			},
			change() {
				if (this.item.type == 1) {
					this.income = this.common.precision_basic(this.item.min * this.item.rate * this.item.day / 100);
				} else {
					this.income = this.common.precision_basic(this.item.min * this.item.rate / 100);
				}
			},
			submit() {
				if (this.loading) return false;
        // passwordPay
				if (!this.user.login) {
					this.$toast(this.$t('invest.loginFirst'));
					return false;
				}
        if (!this.passwordPay) {
          this.$toast('请输入密码');
          return false;
        }
				if (this.user.limit) {
					var times = this.item.num;
					if (this.item.num >= 2) times = 2;
					this.$toast(this.$t('invest.investNum') + this.item.num + this.$t('utils.times' + times));
					return false;
				}
				if (this.user.balance-this.item.min<0) {
					this.$toast(this.$t('invest.moneyNotEnough'));
					return false;
				}
				if (this.user.limit_today) {
					this.$toast(this.$t('invest.investNumEmpty'));
					return false;
				}
				this.loading = true;
				Fetch('/user/invest', {
					id: this.item.id,
          pay_password:this.passwordPay,
          num:this.number
				}).then(r => {
          this.showPassword = false
					this.$router.replace('/invest/record');
				}).catch(e =>{
          this.loading = false
        })
        this.passwordPay = ''
			},
			mycharts(k_x,k_y) {
				let myChart = echarts.init(this.$refs.charts, "macarons");
				myChart.setOption({
					 tooltip: {
					    trigger: 'axis',
						confine:true,
					    position: function (pt) {
					      return [pt[0], '10%'];
					    }
					  },
					  xAxis: {
					    type: 'category',
					    boundaryGap: false,
					    data: k_y
					  },
					  yAxis: {
					    type: 'value',
					    // boundaryGap: [0, '100%'],
						// splitNumber:7
					  },
					  grid:[{
						  top :'15px'
					  }],
					  dataZoom: [
					    {
					      type: 'inside',
					      start: 90,
					      end: 100
					    },
					    {
					      start: 90,
					      end: 100
					    }
					  ],
					  series: [
					    {
					      name: '',
					      type: 'line',
					      symbol: 'none',
					      sampling: 'lttb',
					      itemStyle: {
					        color: 'rgb(255, 70, 131)'
					      },
					      areaStyle: {
					        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					          {
					            offset: 0,
					            color: 'rgb(15, 110, 255)'
					          },
					          {
					            offset: 1,
					            color: 'rgb(17, 232, 255)'
					          }
					        ])
					      },
					      data: k_x
					    }
					  ]
					
				});
				//图表自适应
				window.addEventListener("resize", function() {
					myChart.resize() // myChart 是实例对象
				})
			}
		}
	};
</script>

<style lang="less" scoped>
.diologWrap{
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  .dioTilte{
    font-weight: bold;
    margin-bottom: 18px;
  }
  input{
    background: #F2F2F2;
    width: 70vw;
    height: 40px;
    padding-left: 14px;
    border-radius: 8px;
  }
  .dioBtnWrap{
    display: flex;
    margin-top: 16px;
    .dioBtn{
      width: 33vw;
      height: 38px;
      background: tan;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .leftBtn{
      background: #F2F2F2;
      margin-right: 10px;
    }
    .rightBtn{
      background: linear-gradient(0deg, #1348FF 0%, #018DFF 100%);
      color: #ffffff;
    }
  }
}
	.proCharts {
		height:220px;
	}
	.basic_wrap {
    min-height: 100vh;
    box-sizing: border-box;
    background-image: url(../../assets/img/otherBac.png);
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    flex-direction: column;
	}
  .detailFoalt{
    flex: 1;
    position: relative;
    .detailWrap{
      position: absolute;
      top: -16px;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(90deg, #0039FF 0%, #018BFF 100%);
      border-radius: 16px 16px 0 0;
      display: flex;
      flex-direction: column;
      .detailTitle{
        font-size: 16px;
        color: #ffffff;
        font-weight: bold;
        display: flex;
        align-items: center;
        padding: 18px 0 18px 18px;
      }
      .detailBot{
        background: #ffffff;
        border-radius: 16px 16px 0 0;
        padding-top: 30px;
        padding-bottom: 80px;
        flex: 1;
        .detailContent{
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #EFF5FF;
          height: 60px;
          margin: 0 16px;
          border-radius: 6px;
          .contentItem{
            font-size: 12px;
            .conTop{

            }
            .conBot{
              color: #018BFF;
            }
          }
        }
      }
    }
  }
  .newTitle{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    .backIcon{
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translate(-50%,-50%);
      width: 16px;
      height: 16px;
    }
    .title{
       font-size: 16px;
       font-weight: bold;
    }
  }
  .cover{
    .coverImg{
      height: 360px;
      width: 100vw;
      object-fit: cover;
      display: block;
    }
  }
	.red_top_bg{
		position: fixed;
		z-index: 10;
		box-shadow: unset;
    display: flex;
    align-items: center;
    .backIcon{
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%,-50%);
      width: 16px;
      height: 16px;
    }
		.big_tit{
			color: #FFFFFF;
      font-size: 16px;
		}
	}
	.item_info_bg{
		background: #0F6EFF;
		width: 100%;
		height: 168px;
		border-radius:  0 0 30px 30px;
	}

	.item_title {
		margin-top: 54px;
		line-height: 2;
		font-size: 16px;
		font-weight: bold;
		padding: 10px 20px;
	}

	.logo {
		margin-bottom: 10px;

		img {
			width: 100%;
		}
	}

	.item_info {
		margin-bottom: 10px;
		.title {
			padding: 15px 0 10px 15px;
			font-size: 16px;
			border-bottom: 1px solid #F7F7F7;
		}

		.detail {
			padding: 10px 0;
			line-height: 2;

			.value_class {
				font-weight: bold;
				color: #3CB371;
			}
		}
    .sendBtn{
      display: flex;
      justify-content: center;
      .btn{
        width: 82vw;
        height: 40px;
        background-image: url('../../assets/img/btnBac.png');
        background-size: 100% auto;
        display: flex;
        .btnLeft{
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 18px;
        }
        .btnRight{
          width: 30%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
        }
      }
    }
	}
	.info1{
		margin-top: -116px;
	}

	.popup_info {
    background: linear-gradient(0deg, #FFFFFF 79%, #EFF5FF 100%);
		.title {
			text-align: center;
			padding: 16px;
		}

		.invest_amount {
			color: #999;
			padding: 15px 20px 0 0;
			font-size: 14px;
		}

		.invest_detail_wrap {
			width: 100%;
			margin: 0;
			justify-content: space-between;
			padding: 15px;
			border-top: 1px solid #F7F7F7;

			.detail_money {
				color: #FF0000;
				font-weight: bold;
				font-size: 16px;
				margin-left: 5px;
			}

			.sbtn {
				width: unset;
				height: unset;
				line-height: unset;
				padding: 5px 15px;
			}
		}
	}

	.item_detail {
		padding-bottom: 60px;
		.title {
			padding: 15px 0 10px 15px;
			font-size: 16px;
      font-weight: bold;
		}

		.content {
			padding: 10px 15px 15px 15px;
			line-height: 2;

		}
	}
  .btnWrap{
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    .btn {
      border-radius: 8px;
      width: 77vw;
      height: 40px;
      background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
      font-size: 14px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

	/deep/ .van-cell {
		font-size: unset;
		padding: 5px 16px;
	}
</style>
